<template>
	<view>
		<view class="wrap">
			<view class="hideCanvasView">
				<canvas class="hideCanvas" canvas-id="invite_poster" :style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
			</view>
			<view class="box">
				<image :src="file" mode="widthFix" class="posterImage"></image>
			</view>
			<view class="btn-box u-flex">
				<view class="btn" @tap="download">
					<image src="../../static/images/icon/icon1.png" mode="widthFix"></image>
					<view class="text">保存图片</view>
				</view>
				<view class="btn" @tap="copyLink">
					<image src="../../static/images/icon/icon2.png" mode="widthFix"></image>
					<view class="text">复制链接</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getSharePoster } from '../../static/js/QS-SharePoster/QS-SharePoster.js';
	export default {
		data() {
			return {
				uri:'',
				file:"",
				canvasId: 'invite_poster',
				poster:{},
				user:{}
			};
		},
		async onLoad() {
			this.loadData();
		},
		methods:{
		
			async loadData(){
				await this.$request.post("/member/getMember", {
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					this.user = res.data.json;
					this.createImg();
				})
			},
			async createImg(){
				let that = this;
				try {
					console.log('准备生成:' + new Date());
					that.$api.msg("准备生成")
					var [err,res] = await uni.request({
						url:"https://www.fanghong.net/cbfh.php?cb=2&sturl=2",
						method:'get',
						data:{longurl:"http://www.dkkkgo.com/signup?inviteCode="+that.user.inviteCode},
						dataType:'json'
					});
					that.$api.msg("加载邀请链接")
					console.log(res)
					if(res.data.result == 1){
						that.$api.msg("开始生成海报")
						that.uri = res.data.dwz_url;
						const d = await getSharePoster({
							_this: this, //若在组件中使用 必传
							// type: 'invitePoster',
							backgroundImage:"/static/images/invite_bg.jpg",
							formData: {
								//访问接口获取背景图携带自定义数据
							},
							posterCanvasId: this.canvasId, //canvasId
							delayTimeScale: 20, //延时系数
							drawArray: ({ bgObj, type, bgScale }) => {
								const dx = bgObj.width * 0.3;
								const fontSize = bgObj.width * 0.042;
								const lineHeight = bgObj.height * 0.04;
								//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
								return new Promise((rs, rj) => {
									rs([
										// {
										// 	type: 'image', //头像
										// 	url: "/static/images/logo.png",
										// 	alpha: 1,
										// 	dx: bgObj.width * 0.5 - (bgObj.width * 0.16) / 2,
										// 	dy: bgObj.width * 0.16,
										// 	infoCallBack(imageInfo) {
										// 		let scale = (bgObj.width * 0.16) / imageInfo.height;
										// 		return {
										// 			circleSet: {
										// 				x: (imageInfo.width * scale) / 2,
										// 				y: (bgObj.width * 0.16) / 2,
										// 				r: (bgObj.width * 0.16) / 2
										// 			}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
										// 			dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
										// 			dHeight: bgObj.width * 0.16
										// 			/* roundRectSet: { // 圆角矩形
										// 					r: imageInfo.width * .1
										// 				} */
										// 		};
										// 	}
										// },
										// {
										// 	type: 'text', //昵称
										// 	// fontStyle: 'italic',//倾斜
										// 	text: that.user.tel,
										// 	size: fontSize,
										// 	color: 'black',
										// 	alpha: 1,
										// 	textAlign: 'middle',
										// 	textBaseline: 'middle',
										// 	infoCallBack(textLength) {
										// 		return {
										// 			dx: bgObj.width * 0.5 - textLength * 0.5,
										// 			dy: bgObj.width * 0.42
										// 		};
										// 	},
										// 	serialNum: 0,
										// 	id: 'tag1' //自定义标识
										// },
										// #ifndef  MP-WEIXIN
										{
											type: 'qrcode',
											text: res.data.dwz_url,
											size: bgObj.width * 0.26,
											dx: bgObj.width * 0.5 - (bgObj.width * 0.26) / 2,
											dy: bgObj.width * 1.35
										}
										// #endif
									]);
								});
							},
							setCanvasWH: ({ bgObj, type, bgScale }) => {
								// 为动态设置画布宽高的方法，
								this.poster = bgObj;
							}
						});
						that.$api.msg("海报生成成功")
						// console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
						// this.poster.finalPath = d.poster.tempFilePath;
						this.file = d.poster.tempFilePath;
					}
					
					
				} catch (e) {
					console.log(e)
				}
			},
			download(){
				let that = this;
				let platform = uni.getStorageSync('platform');
				if (platform === 'wxOfficialAccount') {
					that.$tools.toast('长按图片保存');
				} else {
					uni.saveImageToPhotosAlbum({
						filePath: that.file,
						success: res => {
							that.$api.msg('保存成功');
						},
						fail: err => {
							that.$api.msg('保存失败');
						}
					});
				}
			},
			copyLink(){
				let that = this;
				uni.setClipboardData({
					data: that.uri,
					success: () => {
						// this.$api.msg("已复制到剪贴板");
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url(../../static/images/share-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
	.box{
		flex: 1;
		margin: 40rpx;
	}
	.btn-box{
		// padding-top: 30rpx;
		// height: 300px;
		justify-content: center;
		align-items: center;
		text-align: center;
		// padding-bottom: 20rpx;
		padding: 30rpx 0;
	}
	.btn{
		flex: 1;
		image{
			width: 80rpx;
			height: 80rpx;
		}
		.text{
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #6F5420;
		}
	}
	.posterImage {
		width: 100%;
	}
	.hideCanvasView {
		position: relative;
	}
	
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
</style>
